import React, {PureComponent} from "react";
import {View, Text, StyleSheet, Image, TouchableOpacity, ViewPropTypes,Dimensions,PixelRatio} from "react-native";
import {Heading3, Paragraph} from "../widget/Text";
import color from "../../util/color";
type Props = {
    image?: any,
    style?: ViewPropTypes.style,
    title: string,
    subtitle?: string,
}

class DetailCell extends PureComponent<Props> {
    render() {
        let icon = this.props.image && <Image style={styles.icon} source={this.props.image} />

        return (
            <View style={styles.container}>
                <TouchableOpacity>
                    <View style={[styles.content, this.props.style]}>
                        {icon}
                        <Heading3>{this.props.title}</Heading3>
                        <View style={{flex: 1, backgroundColor: 'blue'}} />
                        <Paragraph style={{color: '#999999'}}>{this.props.subtitle}</Paragraph>
                        <Image style={styles.arrow} source={require('../../../res/img/mine/cell_arrow.png')} />
                    </View>
                    <View style={styles.line} />
                </TouchableOpacity>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
    },
    content: {
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 15,
        paddingRight: 10,
    },
    icon: {
        width: 25,
        height: 25,
        marginRight: 10,
    },
    subtitleContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    arrow: {
        width: 14,
        height: 14,
        marginLeft: 5,
    },
    line: {
        width: Dimensions.get('window').width,
        height: 1 / PixelRatio.get(),
        backgroundColor: color.border,
    },
})


export default DetailCell
